@black:#202020;
@font:#4a4a4a;
@gray:#9b9b9b;
@bggray:#f7f8fa;
@blue:#3398db;
@blue2:#33b0ff;
@green:#18aa48;
@orange:#ff7e00;
@orangebg:#ffc86f;
@red:#e60012;
@yellow:#FFF085;
@yellowbg:#FFFFDB;

@border:#eee solid 1px;

.px2rem(@prop,@val){
    @{prop}:(1rem*@val)/(3.2*7.5);
}
.fontSize(){
  font-size: 1em;
}
.inputFont(){
  font-size: 1.1em;
}
.titleFont(){
  font-size: 1.25em;
}
.link(){
  position: absolute;width:100%;height: 100%;left:0;top:0;
}
.omit(){
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.fixTop(){
  padding-top: 3.65em;
}



#ppp{
  .px2rem(width,740);.px2rem(border-left-width,740);height: calc(1em + 100px);
}

/* common */
html{
  font-size: 3.2vw;
}
body {
  background: @bggray; margin: 0; padding: 0; font-family: Helvetica,Tahoma,Arial,heitilight,"PingFang SC","Hiragino Sans GB","Heiti SC",STXihei,"Microsoft YaHei",SimHei,"WenQuanYi Micro Hei";font-size: 3.2vw;text-size-adjust: 100% !important;
}
body *:not(input):not(textarea){
  user-select: none;
}
ul,dl,ol,figure,h1,p,h2,h3,h4,h5,h6,input{
  padding:0;margin:0;font-size: 1em;font-weight: 400;
}
li,dd{
  list-style:none;padding:0;margin:0;
}
img,input,textarea,button{
  vertical-align: middle;appearance: none;border-radius: 0;
}
hr{
  padding:0;margin: 0;border: none;border-top: @border;
}

a{ text-decoration: none; color: @black}

/** 客户管理 */
.client-container{
  font-size:1.2em;
  .remind-wrap{
    display: flex;
    margin-top: 1em;
    background: #fff;
    padding: 1em 0;
    a{
      flex: 1;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;

      img{
        width: 4em;
        height: 4em;

      }
      span{
        display: block;
        text-align: center;
        margin-top: .5em;
      }
      em{
        position: absolute;
        top: -0.5em;
        right: 3.8em;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.5em;
        border-radius: 1.25em;
        background: @red;
        color: #fff;
        text-align: center;
        font-style: normal;
      }
    }
    >span{
      display: block;
      width: 1px;
      background: #efefef;
    }
  }
  .c-list{
    .cl-title{
      display: flex;
      background: #fff;
      margin-top: 1em;
      padding: 1em 1em;
      h3{
        flex: 1;
        i{
          color: @gray;
          font-style: normal;
        }
      }
      .cl-edit{
        color: @blue;
        margin-right: 1em;
      }
    }
    padding-bottom: 3em;
  }
  .cl-section{
    dt{
      padding: .6em 1.2em;
    }
    dd.cl-line{
      height: 1px;
      background: #efefef;
      margin: 0 1em;
    }
    dd{
      display: flex;
      padding: 0 .6em;
      background: #fff;

      >a{
        flex: 1;
        padding: .6em 0;
        i{
          font-style: normal;
        }
        em{
          font-style: normal;
          margin-left: .6em;
        }
      }
      span{
        padding: .6em;
        a{
          margin-left:.6em;
          color: @font;
          border:solid 1px @gray;
          font-size:.9em;
          padding: .4em;
          border-radius: .2em;
        }
      }
    }
  }
  .c-alphabet{
    position: fixed;
    right: .3em;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    a{
      font-size: .7em;
      display: block;
      padding:.2em;
      color: @font;
    }
  }
  .c-footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: .8em 1em;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    border-top: solid 1px #efefef;
    a{
      color: @blue;
    }
  }
}